<template>
  <div class="layout-container">
    <a :href="exportHref" ref="export"></a>
    <vol-box :model.sync="viewModel" :height="450" :width="width" :title="table.cnName+'数据结构'">
      <div slot="content">
        <Table :columns="viewColumns" :data="viewData"></Table>
      </div>
    </vol-box>
    <!--审核(异步点击按钮时才加载待完)-->
    <vol-box :model.sync="auditParam.model" :height="300" :width="550" :title="table.cnName+'--审核'">
      <div slot="content">
        <Audit :auditParam="auditParam"></Audit>
      </div>
      <div slot="footer">
        <Button type="success" icon="md-checkmark-circle" @click="saveAudit">审核</Button>
      </div>
    </vol-box>

    <!--导入excel功能-->
    <vol-box
      v-if="upload.url"
      :model.sync="upload.excel"
      :height="285"
      :width="600"
      :title="table.cnName+'--导入'"
    >
      <UploadExcel @importExcelAfter="importAfter" :url="upload.url" :template="upload.template"></UploadExcel>
    </vol-box>

    <!--头部自定义组件-->
    <gridHeader ref="gridHeader" @parentCall="parentCall"></gridHeader>
    <!--主界面查询与table表单布局-->
    <div class="view-container">
      <div class="view-header">
        <div class="desc-text">
          <Icon type="md-apps" />
          <span>{{table.cnName}}</span>
        </div>
        <div class="notice">
          <!-- <Tooltip content="6666666666666666" placement="bottom">
            <a>Bottom Center</a>
          </Tooltip>-->
          <a class="text" :title="extend.text">{{extend.text}}</a>
        </div>
        <!--快速查询字段-->
        <div class="search-line">
          <QuickSearch
            v-if="singleSearch"
            :singleSearch="singleSearch"
            :searchFormFileds="searchFormFileds"
            :tiggerPress="quickSearchKeyPress"
          ></QuickSearch>
        </div>
        <!--操作按钮组-->
        <div class="btn-group">
          <Button
            v-for="(btn,bIndex) in splitButtons"
            :key="bIndex"
            :type="btn.type"
            :class="btn.class"
            @click="onClick(btn.onClick)"
          >
            <Icon :type="btn.icon" />
            {{btn.name}}
          </Button>
          <Dropdown trigger="click" @on-click="changeDropdown" v-if="buttons.length> maxBtnLength">
            <Button type="info" ghost>
              更多
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem
                :name="item.name"
                v-for="(item,dIndex) in buttons.slice(maxBtnLength,buttons.length)"
                :key="dIndex"
              >
                <Icon :type="item.icon"></Icon>
                {{item.name}}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>

        <!--查询条件-->
        <div class="search-box" v-show="searchBoxShow">
          <vol-form
            ref="searchForm"
            :label-width="labelWidth"
            :formRules="searchFormOptions"
            :formFileds="searchFormFileds"
          >
            <div class="form-closex" slot="footer">
              <Button size="small" type="info" ghost @click="search">
                <Icon type="md-search" />查询
              </Button>
              <!-- <Icon type="md-close-circle" color="color" size="20" /> -->
              <Button size="small" type="success" ghost @click="resetSearch">
                <Icon type="md-refresh" />重置
              </Button>
              <Button size="small" type="warning" ghost @click="searchBoxShow=!searchBoxShow">
                <Icon type="md-power" />关闭
              </Button>
            </div>
          </vol-form>
        </div>
        <vol-box
          v-if="boxInit"
          :model.sync="boxModel"
          :title="table.cnName+(getCurrentAction())"
          :width="boxOptions.width"
          :height="boxOptions.height"
          :padding="0"
        >
          <!--明细头部自定义组件-->
          <div class="iview-com" slot="content">
            <modelHeader ref="modelHeader" class="model-header" @parentCall="parentCall"></modelHeader>
            <div class="item form-item">
              <div class="form-text v-text">
                <span class="title">
                  <Icon type="ios-create-outline" />
                  {{table.cnName}}
                </span>
              </div>
              <vol-form
                ref="form"
                :label-width="boxOptions.labelWidth"
                :formRules="editFormOptions"
                :formFileds="editFormFileds"
              ></vol-form>
            </div>
            <!--明细body自定义组件-->
            <modelBody class="model-body" ref="modelBody" @parentCall="parentCall"></modelBody>
            <div v-if="detail.columns&&detail.columns.length>0" class="grid-detail table-item item">
              <div class="toolbar">
                <div class="title form-text">
                  <span>
                    <Icon type="md-list-box" />
                    {{detail.cnName}}
                  </span>
                </div>
                <!--明细表格按钮-->
                <div class="btns">
                  <Button
                    v-for="(btn,bIndex) in detailOptions.buttons"
                    :key="bIndex"
                    v-show="!btn.hasOwnProperty('hidden')||!btn.hidden"
                    @click="onClick(btn.onClick)"
                    type="dashed"
                    ghost
                    :icon="btn.icon"
                    size="small"
                  >{{btn.name}}</Button>
                </div>
              </div>
              <vol-table
                ref="detail"
                @loadBefore="loadInternalDetailTableBefore"
                @loadAfter="loadDetailTableAfter"
                @rowChange="detailRowOnChange"
                :url="detailOptions.url"
                :index="detailOptions.edit"
                :tableData="detailOptions.data"
                :columns="detailOptions.columns"
                :pagination="detailOptions.pagination"
                :height="detailOptions.height"
                :single="detailOptions.single"
                :pagination-hide="false"
                :defaultLoadPage="detailOptions.load"
                :doubleEdit="detailOptions.doubleEdit"
                :beginEdit="detailOptions.beginEdit"
                :endEditBefore="detailOptions.endEditBefore"
                :endEditAfter="detailOptions.endEditAfter"
                :summary="detailOptions.summary"
              ></vol-table>
            </div>
            <!--明细footer自定义组件-->
            <modelFooter ref="modelFooter" class="model-footer" @parentCall="parentCall"></modelFooter>
          </div>

          <div slot="footer">
            <Button
              v-for="(btn,bIndex) in boxButtons"
              :key="bIndex"
              :type="btn.type"
              v-show="!btn.hasOwnProperty('hidden')||!btn.hidden"
              :disabled="btn.hasOwnProperty('disabled')&&!!btn.disabled"
              @click="onClick(btn.onClick)"
            >
              <Icon :type="btn.icon" />
              {{btn.name}}
            </Button>
            <Button type="info" @click="boxModel=false">
              <Icon type="md-close" />关闭
            </Button>
          </div>
        </vol-box>
      </div>
      <!--body自定义组件-->
      <gridBody ref="gridBody" @parentCall="parentCall"></gridBody>
      <!--table表格-->
      <div class="grid-container">
        <vol-table
          ref="table"
          :single="single"
          @loadBefore="loadTableBefore"
          @loadAfter="loadTableAfter"
          @rowChange="rowOnChange"
          :tableData="[]"
          :linkView="linkData"
          :columns="columns"
          :pagination="pagination"
          :height="height"
          :max-height="tableMaxHeight"
          :pagination-hide="false"
          :url="url"
          :defaultLoadPage="load"
          :summary="summary"
        ></vol-table>
      </div>
    </div>

    <!--footer自定义组件-->
    <gridFooter ref="gridFooter" @parentCall="parentCall"></gridFooter>
  </div>
</template>

<script>
const _const = {
  EDIT: "update",
  ADD: "Add",
  VIEW: "view",
  PAGE: "getPageData",
  AUDIT: "audit",
  DEL: "del",
  EXPORT: "Export", //导出操作返回加密后的路径
  DOWNLOAD: "DownLoadFile", //导出文件
  DOWNLOADTEMPLATE: "DownLoadTemplate", //下载导入模板
  IMPORT: "Import", //导入(导入表的Excel功能)
  UPLOAD: "Upload" //上传文件
};
const comName = [
  "gridHeader",
  "gridBody",
  "gridFooter",
  "modelHeader",
  "modelBody",
  "modelFooter"
];
import Empty from "@/components/basic/Empty.vue";
var $viewGridVue, $this;
let _components = {
  gridHeader: Empty,
  gridBody: Empty,
  gridFooter: Empty,
  modelHeader: Empty,
  //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
  // modelHeader: {
  //   template: ""//'<Alert type="success">静态页面发布目前主要用于的是移动端</Alert>'
  // },
  // gridHeader: function(resolve, reject) {
  //   setTimeout(function() {
  //     // 向 `resolve` 回调传递组件定义
  //     resolve({
  //       template: ""
  //     });
  //   }, 1000);
  // },
  modelBody: Empty,
  modelFooter: Empty
};
import VolTable from "@/components/basic/VolTable.vue";
var vueParam = {
  components: {
    ..._components,
    VolForm: () => import("@/components/basic/VolForm.vue"),
    VolBoxForm: () => import("@/components/basic/VolBoxForm.vue"),
    VolTable: VolTable, //() => import("@/components/basic/VolTable.vue"),
    VolBox: () => import("@/components/basic/VolBox.vue"),
    QuickSearch: () => import("@/components/basic/QuickSearch.vue"),
    Audit: () => import("@/components/basic/Audit.vue"),
    UploadExcel: () => import("@/components/basic/UploadExcel.vue")
  },
  props: {},
  data() {
    return {
      _inited: false,
      single: false, //表是否单选
      const: _const, //增删改查导入导出等对应的action
      boxInit: false, //新建或编辑的弹出框初化状态，默认不做初始化，点击新建或编辑才初始化弹出框
      searchBoxShow: false, //高级查询(界面查询后的下拉框点击触发)
      singleSearch: {}, //快速查询字段
      exportHref: "",
      currentAction: _const.ADD, //当新建或编辑时，记录当前的状态:如当前操作是新建
      currentRow: {}, //当前编辑或查看数据的行
      closable: false,
      boxModel: false, //弹出新建、编辑框
      width: 700, //弹出框查看表数据结构
      labelWidth: 100, //高级查询的标签宽度
      viewModel: false, //查看表结构的弹出框
      viewColumns: [], //查看表结构的列数据
      viewData: [], //查看表结构信息
      maxBtnLength: 3, //界面按钮最多显示的个数，超过的数量都显示在更多中
      buttons: [], //查询界面按钮  如需要其他操作按钮，可在表对应的.js中添加(如:Sys_User.js中buttons添加其他按钮)
      splitButtons: [],
      uploadfiled: [], //上传文件图片的字段
      boxButtons: [], //弹出框按钮 如需要其他操作按钮，可在表对应的.js中添加
      dicKeys: [], //当前界面所有的下拉框字典编号及数据源
      hasKeyField: [], //有字典数据源的字段
      keyValueType: { _dinit: false },
      url: "", //界面表查询的数据源的url
      hasDetail: false, //是否有从表(明细)表格数据
      initActivated: false,
      load: true, //是否默认加载表数据
      activatedLoad: false, //页面触发actived时是否刷新页面数据
      summary: false, //查询界面table是否显示合计
      //需要从远程绑定数据源的字典编号,如果字典数据源的查询结果较多，请在onInit中将字典编号添加进来
      //只对自定sql有效
      remoteKeys: [],
      // detailUrl: "",
      detailOptions: {
        //弹出框从表(明细)对象
        //从表配置
        buttons: [], //弹出框从表表格操作按钮,目前有删除行，添加行，刷新操作，如需要其他操作按钮，可在表对应的.js中添加
        cnName: "", //从表名称
        key: "", //从表主键名
        data: [], //数据源
        columns: [], //从表列信息
        edit: true, //明细是否可以编辑
        single: false, //明细表是否单选
        load: true,
        delKeys: [], //当编辑时删除当前明细的行主键值
        url: "", //从表加载数据的url
        pagination: { total: 0, size: 100, sortName: "" }, //从表分页配置数据
        height: 0, //默认从表高度
        doubleEdit: true, //使用双击编辑
        currentReadonly: false, //当前用户没有编辑或新建权限时，表单只读(可用于判断用户是否有编辑或新建权限)
        //开启编辑时
        beginEdit: (row, column, index) => {
          return true;
        },
        //结束编辑前
        endEditBefore: (row, column, index) => {
          return true;
        },
        //结束编辑后
        endEditAfter: (row, column, index) => {
          return true;
        }
      },
      auditParam: {
        //审核对象
        rows: 0, //当前选中审核的行数
        model: false, //审核弹出框
        status: -1, //审核结果
        reason: "", //审核原因
        //审核选项(可自行再添加)
        data: [
          { text: "通过", status: 1 },
          { text: "拒绝", status: 2 }
        ]
      },
      upload: {
        //导入上传excel对象
        excel: false, //导入的弹出框是否显示
        url: "", //导入的路径,如果没有值，则不渲染导入功能
        template: {
          //下载模板对象
          url: "", //下载模板路径
          fileName: "" //模板下载的中文名
        },
        init: false //是否有导入权限，有才渲染导入组件
      },
      height: 0, //表高度
      tableHeight: 0, //查询页面table的高度
      tableMaxHeight: 0, //查询页面table的最大高度
      pagination: { total: 0, size: 30, sortName: "" }, //从分页配置数据
      boxOptions: {
        saveClose: true,
        labelWidth: 100,
        height: 0,
        width: 0,
        summary: false //弹出框明细table是否显示合计
      } //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
    };
  },
  methods: {
    //方法已放到ViewGridConfig文件夹下，加载时会合并ViewGridConfig下的方法到methods中
    mergeComponents() {
      if (this.extend.components) {
        for (const key in this.extend.components) {
          if (this.extend.components[key]) {
            this.$options.components[key] = this.extend.components[key];
          } else {
            this.$options.components[key] = Empty;
          }
        }
      }
    }
  },
  activated() {
    if (!this._inited) {
      this._inited = true;
      return;
    }
    if (this.activatedLoad) {
      this.refresh();
    }
    // console.log("activated");
    // //  this.$options.components.modelHeader.template =
    // //   '<Alert type="success">88767</Alert>';
    //合并扩展组件、弹出框新建编辑页面自定义扩展组件或组件路径
    this.mergeComponents();
  },
  mounted() {
    this.mounted();
  },
  beforeCreate() {},
  created: function() {
    //在其他方法中如果拿不到this，请使用$viewGridVue或$this
    $viewGridVue = this;
    $this = this;
    //合并扩展组件
    this.mergeComponents();
    //合并自定义业务扩展方法
    if (this.extend.methods) {
      for (const key in this.extend.methods) {
        this[key] = this.extend.methods[key];
      }
    }
    //如果没有指定排序字段，则用主键作为默认排序字段
    this.pagination.sortName = this.table.sortName || this.table.key;
    this.initBoxButtons(); //初始化弹出框与明细表格按钮
    this.onInit(); //初始化前，如果需要做其他处理在扩展方法中覆盖此方法
    //初始编辑框等数据
    this.initBoxHeightWidth();

    this.initDicKeys(); //初始下框数据源

    this.onInited(); //初始化后，如果需要做其他处理在扩展方法中覆盖此方法
    this.splitButtons = this.getButtons();
  },
  beforeUpdate: function() {},
  updated: function() {}
};

import props from "./ViewGridConfig/props.js";
import methods from "./ViewGridConfig/methods.js";

//合并属性
vueParam.props = Object.assign(vueParam.props, props);
//合并方法
vueParam.methods = Object.assign(
  vueParam.methods,
  methods,
  props.extend.methods
);
// vueParam.methods=methods;
export default vueParam;
import "@/assets/css/ViewContainer.less";
import "@/assets/css/ViewGrid.less";
</script>

<style scoped>
.btn-group >>> .ivu-select-dropdown {
  padding: 0px !important;
  right: 3px;
}
.btn-group >>> .ivu-select-dropdown .ivu-dropdown-menu {
  min-width: 100px;
  right: -2px;
  position: absolute;
  background: white;
  width: 130px;
  border-radius: 5px;
  border: 1px solid #e7e5e5;
}
.vertical-center-modal >>> .srcoll-content {
  padding: 0;
}
.view-model-content {
  background: #eee;
}
</style>
